<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="format-detection" content="telephone=no, address=no, email=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<link rel="stylesheet" href="css/mui.min.css" type="text/css" charset="utf-8" />
		<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />
		<link rel="stylesheet" href="css/product.css" type="text/css" charset="utf-8" />
		<style>
			.productFile {
				padding: 0.33rem;
				background: #fff;
			}
			
			.productFile p {
				color: #666;
				margin-bottom: 0.42rem;
			}
			
			.file1 {
				width: calc(100%- 2.5rem)
			}
			
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav mui-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">产品信息</h1>
		</header>
		<div class="mui-content">
			<div style="height:10.5rem;overflow: scroll;">
				<div id="refresh">
					<div class="productFile">
						<div class="fl file1">
							<p>产品名称：贵州习酒贵州习酒贵州习酒贵州习酒贵州习酒</p>
							<p>产品类型：箱码</p>
							<p>产品数量：24瓶</p>
							<p>ID：xd-78BKQGP3</p>
						</div>
						<div class="fr">
							<img src="img/login/productSample.png" style="width:2.32rem" />
						</div>
						<div class="clearfix"></div>
						<div>
							<p>产品产地：山东德州</p>
							<p>销售地区：山东青岛</p>
							<p style="margin-bottom:0px;">公司名称：贵州茅台集团习酒有限责任公司</p>
						</div>
					</div>
					<div class="historyList">
						<p>历史记录</p>
						<div>
							<ul class="historyUi">
								<li class="historyItem">
									<p class="opeate">入库</p>
									<p>操作时间：2016年12月27日 09:47:56</p>
									<p>操作人：张三 13588888888</p>
								</li>
								<li>
									<p class="opeate">出库</p>
									<p>操作时间：2016年12月27日 09:47:56</p>
									<p>操作人：张三 13588888888</p>
								</li>
								<li>
									<p class="opeate">入库</p>
									<p>操作时间：2016年12月27日 09:47:56</p>
									<p>操作人：张三 13588888888</p>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<footer class="mui-bar mui-bar-footer">
			<nav class="mui-bar mui-bar-tab" style="font-weight: bold;">
				<a class="mui-tab-item mui-active" id="main-main" data-title="主页">
					<span class="pic-icon pic-icon-home"></span>
					<span class="mui-tab-label">主页</span>
				</a>
				<a class="mui-tab-item" id="main-xhcm" data-title="出入库">
					<span class="pic-icon pic-icon-inout"></span>
					<span class="mui-tab-label">出入库</span>
				</a>
				<a class="mui-tab-item" id="main-list" data-title="经销商">
					<span class="pic-icon pic-icon-jxs"></span>
					<span class="mui-tab-label">经销商</span>
				</a>
				<a class="mui-tab-item" id="main-center" data-title="个人中心">
					<span class="pic-icon pic-icon-person"></span>
					<span class="mui-tab-label">个人中心</span>
				</a>
			</nav>
		</footer>

	</body>
	<script src="js/resize.js"></script>
	<script src="js/mui.min.js"></script>
	<script src="js/refresh.js"></script>
	<script type="text/javascript">
		var contentWebview = null;
		document.querySelector('.mui-action-back').addEventListener('tap', function() {
			if(contentWebview == null) {
				contentWebview = plus.webview.currentWebview().children()[0];
			}
			contentWebview.evalJS("mui('#refresh').pullRefresh().scrollTo(0,0,100)");
		});

		newRefresh.initRefresh('#refresh', pullupRefresh, '', '');

		function pullupRefresh() {
			newRefresh.ajaxGetData('js/json/inoutInfo.json', '', '', formList);
		}
		var count = 0;

		function formList(list, params) {
			setTimeout(function() {
				mui('#refresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
				var table = document.body.querySelector('.historyUi');
				var cells = document.body.querySelectorAll('.historyItem');
				for(var i = 0, len = list.length; i < len; i++) {
					var temp = list[i];
					var li = document.createElement('li');
					li.className = 'historyItem';
					var html = '';
					html += '<p class="opeate">' + temp.operate + '</p>' +
						'<p>操作时间：' + temp.time + '</p>' +
						'<p>操作人' + temp.name + ' ' + temp.tel + '</p>';
					li.innerHTML = html;
					table.appendChild(li);
				}
			}, 1500);
		}
 
	</script>

</html>